<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { reLaunch } from '@tarojs/taro';
import { state } from './state';
import dayjs from 'dayjs';
import { BorrowRanking } from './.';
import {
  QUERY_DOSSIER_STATISTICS_BY_DATE,
  QUERY_DOSSIER_STATISTICS_BY_DOSSIER,
  QUERY_DOSSIER_STATISTICS_BY_DEPT,
} from '/@/api/modules/archive/police/dossier-statistics';
/**
 * 今日借阅
 */
function todayBorrow() {
  const beginTime = dayjs().hour(0).minute(0).second(0).valueOf();
  const endTime = dayjs().hour(23).minute(59).second(59).valueOf();
  QUERY_DOSSIER_STATISTICS_BY_DATE({ beginTime, endTime }).then((res) => {
    if (res.content && res.content.length > 0) {
      state.todayBorrowCount = res.content[0].value || 0;
    }
  });
}

/**
 * 本月借阅
 */
function currentMonthBorrow() {
  const beginTime = dayjs().startOf('month').valueOf();
  const endTime = dayjs().endOf('month').valueOf();
  QUERY_DOSSIER_STATISTICS_BY_DATE({ beginTime, endTime }).then((res) => {
    if (res.content && res.content.length > 0) {
      state.currentMonthBorrowCount = res.content[0].value || 0;
    }
  });
}

/**
 * 声明局部state避免缓存
 */
const tableState = reactive<{
  /**
   * 档案借阅排名
   */
  borrowRankingList: BorrowRanking[];
}>({
  borrowRankingList: [],
});
/**
 * 借阅排名
 */
function borrowRanking() {
  QUERY_DOSSIER_STATISTICS_BY_DOSSIER({}).then((res) => {
    res.content?.forEach((item, index) => {
      tableState.borrowRankingList.push({
        rank: (index + 1).toString(),
        name: item.name || '',
        value: (item.value || 0) + '次',
      });
    });
  });
}

/**
 * 部门借阅统计
 */
function borrowDept() {
  QUERY_DOSSIER_STATISTICS_BY_DEPT({}).then((res) => {
    state.borrowDeptList = res.content || [];
    departmentBar();
  });
}

//柱形图
function departmentBar() {
  const yDataList: string[] = state.borrowDeptList
    ?.map((item) => {
      return item.name || '';
    })
    .reverse() || [''];

  let xDataList1: number[] =
    state.borrowDeptList
      ?.map((item) => {
        return item.value || 0;
      })
      .reverse() || [];
  state.borrowDeptOption = {
    grid: {
      left: 74,
    },
    xAxis: {
      type: 'value',
      minInterval: 1,
    },
    yAxis: {
      type: 'category',
      data: yDataList,
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          let texts = value;
          if (texts.length > 5) {
            texts = texts.substring(0, 5) + '...';
          }
          return texts;
        },
      },
    },
    series: [
      {
        data: xDataList1,
        type: 'bar',
        barMaxWidth: 30,
      },
    ],
  };
}

onMounted(() => {
  todayBorrow();
  currentMonthBorrow();
  borrowRanking();
  borrowDept();
});
</script>

<template>
  <view class="archive-manage-statistics app-page--1">
    <app-navbar title="档案管理" />
    <nut-tabs
      model-value="statistics"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'list') {
            reLaunch({ url: '/pages/archive-manage-new/list/index' });
          }
        }
      "
    >
      <nut-tab-pane title="档案管理" pane-key="list" />
      <nut-tab-pane title="统计分析" pane-key="statistics" />
    </nut-tabs>
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="archive-manage-statistics__wrapper">
        <nut-cell-group>
          <nut-cell title="审批统计" />
          <nut-cell>
            <template v-slot:title>
              <view class="archive-manage-statistics__borrow">
                <view class="archive-manage-statistics__today">
                  <view class="archive-manage-statistics__title"
                    ><text>{{ state.todayBorrowCount }}</text></view
                  >
                  <view><text>今日借阅</text></view>
                </view>
                <view class="archive-manage-statistics__current-month">
                  <view class="archive-manage-statistics__title"
                    ><text>{{ state.currentMonthBorrowCount }}</text></view
                  >
                  <view><text>本月借阅</text></view>
                </view>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell title="档案借阅排名" />
          <nut-cell>
            <template v-slot:title>
              <nut-table
                :bordered="false"
                :columns="[
                  {
                    title: '排名',
                    key: 'rank',
                    align: 'center',
                    stylehead: 'background-color:#ccc',
                  },
                  {
                    title: '档案名称',
                    key: 'name',
                    align: 'center',
                    stylehead: 'background-color:#ccc',
                  },
                  {
                    title: '借阅次数',
                    key: 'value',
                    align: 'center',
                    stylehead: 'background-color:#ccc',
                    stylecolumn: 'color:blue;',
                  },
                ]"
                :data="tableState.borrowRankingList"
              ></nut-table>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell title="部门借阅统计" />
          <nut-cell>
            <template v-slot:title>
              <app-e-chart :option="state.borrowDeptOption"></app-e-chart>
            </template>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
